/**
 * Created by zhaoxk on 2016/12/6.
 */
import {Input, Collapse, message, AutoComplete} from 'antd';
import SearchInput from './searchInput';
import React from 'react';
import _ from 'lodash';
const Panel = Collapse.Panel;
export default class CompTree extends React.Component {
    componentWillReceiveProps(np) {
        this.dataSource(np.data);
    }

    dataSource = d => {
        let ds = [];
        _.forEach(d, item => {
            if (item.segTypes) {
                ds = _.concat(ds, item.segTypes);
            }
        });
        return ds;
    };

    loop = data => data.map(item => {
        if (item.segTypes) {
            return (<Panel header={item.name} key={item.code}>
                <ul className="segTypes">
                    {this.loop(item.segTypes)}
                </ul>
            </Panel>);
        }
        return (
            <li
                key={item.code}
                onClick={() => {
                    this.addType(item);
                }}
            >
                {item.name}
            </li>
        );
    });

    addType = item => {
        const {addType} = this.props;
        if (!item.code) {
            message.error('无效段落，请联系您的管理员！');
            return;
        }
        if (typeof addType === 'function') {
            addType(item);
        }
    };

    render() {
        const {data = []} = this.props;
        const _d = this.loop(data);
        const _d2 = this.dataSource(data);
        return (
            <div>
                <SearchInput
                    data={_d2}
                    handleCheck={this.addType}
                    needClear
                />
                <Collapse
                    accordion={true}
                    bordered={false}
                    id="cate"
                >
                    {_d}
                </Collapse>
            </div>
        );
    }
}
